<template>
	<view class="modal-to-void" v-if="visible" @touchmove.stop.prevent>
		<!-- <uni-section title="企业信息" type="line"> -->
		<view class="example modal-con">
			<uni-forms ref="valiForm" :model="baseFormData" :rules="rules">
				<uni-forms-item label="旧密码" required name="password">
					<uni-easyinput v-model="baseFormData.password" placeholder="请输入旧密码" />
					</uni-forms-item>
				<uni-forms-item label="新密码" required name="password1">
					<uni-easyinput v-model="baseFormData.password1" placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" required name="password2">
					<uni-easyinput v-model="baseFormData.password2" placeholder="请输入确认新密码" />
				</uni-forms-item>
				
			</uni-forms>
			<!-- <u-button style="border-color: #FFD14A;background-color: #FFD14A;color:'#000'" type="primary" @click="ok('valiForm')">立即修改</u-button> -->
			<view class="btn ok" @click="ok">
				<text>立即修改</text>
			</view>
		</view>
		<!-- </uni-section> -->
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import sm3 from "@/common/sm3/index.js";
	
	export default {
		components: {
			pickRegions
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			
		},
		data() {
			return {
				baseFormData: {
					password: "",
					password1: "",
					password2: "",
					
				},
				rules: {
				password: {
					rules: [{
						required: true,
						errorMessage: '旧密码不能为空'
					}]
				},
					password1: {
						rules: [{
							required: true,
							errorMessage: '新密码不能为空'
						}]
					},
					password2: {
						rules: [{
							required: true,
							errorMessage: '确认新密码不能为空'
						}]
					},
					

				},
			}
		},
		mounted() {
		},
		methods: {
		
			// 注册
			ok(ref) {
				 if(!this.baseFormData.password){
					uni.showToast({
						title: '请输入旧密码',
						icon: 'none'
					})
					return
				}
				if(!this.baseFormData.password1){
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return
				}
				if(this.baseFormData.password1.length >= 8){
					
				}else{
					uni.showToast({
						title: '用户密码长度不得小于8位',
						icon: 'none'
					})
					return
				}
				let regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/;
				if(!regex.test(this.baseFormData.password1)){
					uni.showToast({
						title: '用户密码必须包含大写字母、小写字母、数字',
						icon: 'none'
					})
					return
				}
				if(!this.baseFormData.password2){
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					})
					return
				}
				if(this.baseFormData.password1 != this.baseFormData.password2 ){
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					this.baseFormData.password2 = "";
					return
				}
					this.$emit('confirm',this.baseFormData)
					
				

			},
		},

	}
</script>

<style lang="scss" scoped>
	.example {
		width: 95%;
		// height: 97.5%;
		padding: 10px;
		position: absolute;
		background: #fff;
	}

	.verification_code {
		display: flex;

		.img_code {
			width: 130px;
			height: 36px;
			display: inline-block;
		}
	}
	.modal-to-void {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: block;
		box-sizing: border-box;
		background: rgba(0, 0, 0, .5);
	
		.modal-con {
			position: absolute;
			width: 80%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			border-radius: 3px;
			text-align: center;
	
		
	
			
		}
	}
	.btn {
		display: inline-block;
		border-radius: 2.5em;
		line-height: 2.5em;
		padding: 0 2em;
		border: 4rpx solid #666;
		color: #666;
		margin: 0 0.5em;
	}
	.ok {
		background: #FFD14A;
		    width: 62%;
		border-color: $app-color;
		// color: $app-color;
	}
</style>